<template>
  <el-col style="width: 98%;">
    <el-card shadow="always">
      <!-- 头 -->
      <template #header>
        <h3>
          任务进度
          <span style="float: right">
            <el-icon><Timer /></el-icon>
            <span style="color: #5b5959">{{year_week}}</span>
          </span>
        </h3>
      </template>
      <!--具体内容-->
      <div style="padding: 5px;font-size: 18px">
        <!--统计情况-->
        <div style="overflow: hidden;">
          <div style="margin-bottom: 40px;float: left">
            <p style="margin-bottom: 20px">
              <span>任务完成情况：</span>
            </p>
            <p v-if="bool_work == 'false'" style="color: #5b5959;">&emsp;&emsp;未完成周任务</p>
            <p v-if="bool_work == 'true'" style="color: #5b5959;">&emsp;&emsp;完成周任务</p>

          </div>
          <div style="margin-bottom: 40px;float: right">
            <p style="margin-bottom: 20px">
              <span>任务超量情况：</span>
            </p>
            <p v-if="bool_overwork == 'true'" style="color: #5b5959;">&emsp;&emsp;超量</p>
            <p v-if="bool_overwork == 'false'" style="color: #5b5959;">&emsp;&emsp;未超量</p>
          </div>
        </div>
        <!-- 具体进度-->
        <div style="margin-bottom: 40px">
          <p style="margin-bottom: 20px">
            <span>具体任务进度：</span>
          </p>
          <div style="color: #5b5959;" >
            &emsp;&emsp;<p v-html="progress_content" style=""></p>
          </div>
        </div>
        <!-- 掌握情况 -->
        <div style="margin-bottom: 50px">
          <span>本周请假：<span style="color: #5b5959;">{{ask_for_leave}}</span></span>
          <span style="float: right">掌握情况：<span style="color: #5b5959;">{{grasp}}</span></span>
        </div>
        <!-- 操作 -->
        <div style="padding-bottom: 15px;float: right">
          <span>
            <el-button style="margin-right: 20px" type="primary" @click="progress_update(this.$props)">编 辑</el-button>
          </span>
          <span>
            <el-button style="margin-right: 0px" type="danger" @click="progress_delete(id)">删 除</el-button>
          </span>
        </div>
      </div>
      <!-- 编辑弹窗-->
      <div>
        <el-dialog v-model="show" title="编辑进度数据" width="70%">
          <el-form ref="form" :rules="rules" :model="form" label-width="110px">
            <el-form-item label="时间" style="float: left" prop="year_week">
              <el-input v-model="form.year_week" style="width: 80%" />
            </el-form-item>
            <el-form-item label="请假次数" prop="ask_for_leave">
              <el-input v-model="form.ask_for_leave" style="width: 40%" />
            </el-form-item>
            <el-form-item label="是否完成任务" style="margin-left: 6%" >
              <el-radio v-model="form.bool_work" label="true">完成周任务</el-radio>
              <el-radio v-model="form.bool_work" label="false">未完成周任务</el-radio>
            </el-form-item>
            <el-form-item label="是否超量完成" style="margin-left: 6%" >
              <el-radio v-model="form.bool_overwork" label="true">超量</el-radio>
              <el-radio v-model="form.bool_overwork" label="false">未超量</el-radio>
            </el-form-item>
            <el-form-item label="任务掌握情况" style="margin-left: 6%" >
              <el-radio v-model="form.grasp" label="较好">较好</el-radio>
              <el-radio v-model="form.grasp" label="一般">一般</el-radio>
              <el-radio v-model="form.grasp" label="较差">较差</el-radio>
            </el-form-item>
            <div id="editor—wrapper">
              <!--            工具栏-->
              <div id="toolbar-container"></div>
              <!--            编辑框-->
              <div id="editor-container"></div>
            </div>
          </el-form>
          <template #footer>
          <span class="dialog-footer">
            <el-button @click="quxiao">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
          </template>

        </el-dialog>
      </div>
    </el-card>
  </el-col>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {createEditor, createToolbar} from "@wangeditor/editor";
import '@wangeditor/editor/dist/css/style.css';
let editor;
let toolbar;
export default {
  name: "progressContent",
  props: {
    id:String,
    year_week:String,
    bool_work:String,
    bool_overwork:String,
    progress_content:String,
    grasp:String,
    ask_for_leave:Number,
  },
  data() {
    return{
      rules: {
        year_week: [
          {required: true, message: '内容不能为空', trigger: 'blur'},
          { pattern: /^(\d{4})年-(\d{1,2})周$/, message: '时间格式：xxxx年-x周', trigger: 'blur' }
        ],
        ask_for_leave: [
          {required: true, message: '内容不能为空', trigger: 'blur'},
          { pattern: /^[0-7]$/, message: '请假次数0-7', trigger: 'blur' }
        ],
      },
      show:false,
      form:{},
    }
  },
  created() {
    //
    this.update_all_ask();
  },
  methods: {
    update_all_ask() {
      // 获取用户id
      const memberId = this.$route.path.substring(10);
      request.get("/progress/update_leave_all",{
        params:{
          id:memberId,
        }
      })
    },
    // 创建富文本编辑器 1
    editor_create(content) {
      this.$nextTick(()=> { //执行延迟回调 ,避免异步找不到dom
        const editorConfig = {
          placeholder: '具体任务内容',
        }
        // 创建编辑器
        editor = createEditor({
          selector: '#editor-container',
          config: editorConfig,
        })
        editor.setHtml(content)
        // 创建工具栏
        toolbar = createToolbar({
          editor,
          selector: '#toolbar-container'
        })
      })
    },
    // 保存更新后端数据
    save() {
      this.form.progress_content = editor.getHtml()
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 修改进度详情
          request.patch("/progress/update",this.form).then(res => {
            if (res.code == 200) {
              ElMessage({
                message: '更新成功',
                type: 'success',
              })
              const memberId = this.$route.path.substring(10)
              // 修改总请假次数
              request.get("/progress/update_leave_all",{
                params:{
                  id:memberId,
                }
              })
              setTimeout( () => {
                location.reload()
              },1500)
            } else {
              ElMessage.error('更新失败'+res.msg)
            }
            this.show = false
          })
        }
      })
    },
    // 取消编辑弹窗 1
    quxiao() {
      this.show = false
      if (editor || toolbar) {
        editor.destroy()
        toolbar.destroy()
      }
    },
    // 打开编辑弹窗 1
    progress_update(row) {
      this.show = true
      this.form = JSON.parse(JSON.stringify(row))
      if (!editor) { // 避免 重复创建相同id 的 编辑器
        this.editor_create(row.progress_content)
      }else {
        editor.destroy()
        toolbar.destroy()
        this.editor_create(row.progress_content)
      }
    },
    // 删除进度信息 1
    progress_delete(id) {
      request.delete("/progress/delete/"+id).then(res => {
        if (res.code == "200") {
          ElMessage({
            message: '删除成功.',
            type: 'success',
          })
          const memberId = this.$route.path.substring(10)
          // 修改总请假次数
          request.get("/progress/update_leave_all",{
            params:{
              id:memberId,
            }
          })
          setTimeout( () => {
            location.reload()
          },1000)
        } else {
          ElMessage.error('删除失败.')
        }

      })
    }
  }
}
</script>

<style scoped>

</style>